<template>
  <div class="hotGames">
    <nut-navbar :clickable="false">
      <template #left>
        <iconpark-icon @click="router.go(-1)" class="close" icon-id="back" size="1.2rem"></iconpark-icon>
      </template>
      <template #content>
        <span>{{ gameName }}{{ t("home_page_game") }}</span>
      </template>
    </nut-navbar>

    <div class="content">
      <div class="query">
        <nut-input v-model="queryGame" :placeholder="t('club_page_ss')" clearable @update:model-value="onClickSearch">
          <template #left>
            <iconpark-icon icon-id="sousuo" size=".8rem" class="refresh"></iconpark-icon>
          </template>
        </nut-input>
      </div>

      <div class="main_content">
        <div class="games_box">
          <ul class="electronic_list_ul" :style="gameBoxStyle()" v-if="result.searchList.length">
            <li class="electronic_list_li" @click="toGameDetail(ele)" v-for="ele in result.searchList" :key="ele.id">
              <ImgT class="bg_img" :src="`${settings.backend_upload}${ele.picture_h5}`" alt="" />
              <div class="name">
                <!--                <span>{{ ele.name[Local.get('lang')] }}</span>-->
                <span>{{ unserialize(ele.name, false) }}</span>
              </div>
              <!--              <iconpark-icon v-if="true" class="collect_img" name="shoucang-sel" size="24"/>-->
              <!--              <iconpark-icon v-else class="collect_img" name="shoucang-def" size="24"/>-->
              <iconpark-icon v-if="hasLogin" class="collect_img"
                :name="allCollected.includes(ele.id) ? 'shoucang-sel' : 'shoucang-def'" size="1rem"
                @click.stop="reqCollect(ele, allCollected)"></iconpark-icon>
              <div v-if="ele.is_maintain === 1" class="masking_layer">
                <iconpark-icon class="maskin_img" name="padlock1" size="28" />
                <span>{{ t("inside_page_game_coming_soon") }}</span>
                <span>{{ t("inside_page_game_stay_tuned") }}</span>
              </div>
            </li>
          </ul>
          <EmptyState v-else :text="t('inside_page_no_null_data')" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { onBeforeMount, reactive, ref } from "vue";

import { storeToRefs } from "pinia";
import { Page } from "@/store/page";
import pinia from "@/store";
import { useI18n } from "vue-i18n";

import EmptyState from "@/views/searchGames/components/EmptyState.vue";
import { onPlayGame, unserialize } from "@/utils/useStoreMethods";
import { reqCollect } from "@/utils/useNetMethods.ts";
import { User } from "@/store/user.ts";

const router = useRouter();

const { settings, lang, homeGameData } = storeToRefs(Page(pinia));
const { allCollected, hasLogin, appHeight } = storeToRefs(User(pinia));

const { t } = useI18n();

const queryGame = ref("");
const state = reactive({
  // 游戏平台id  -1为查看全部的游戏
  agentId: -1,
  // 自定义标签 0为全部 1为热门 -2为收藏，-3为最近
  lableId: 1,
  // //也表示场馆id -1 为所有场馆
  kindId: -1,
  // 右上方侧标签点击样式
  lableActive: -1,
  // 所有标签集合
  kindList: [] as any,
  // 当前点击的游戏
  currentGame: null as any,
  // 游戏输入框节流
  timer: null as any,
  // 游戏类型
  type: 1,
});
// const params: any = reactive({ // 参数
//   isLoad: false,
//   loadMore: true,
//   pageSize: 15,
//   page: 1,
// })
const result: any = reactive({
  // 结果
  total_page: 0,
  // 游戏集合
  list: [],
  searchList: [],
});
const gameBoxStyle = () => {
  return { height: `calc(${appHeight.value}px - 50vw )` };
};
let gameName = ref(""); // title名字

const getHomeData = () => {
  const data = homeGameData.value.find((e: any) => e.id == 0);
  gameName.value = unserialize(data.name, false); // name as string
};

// 判读是否是进入游戏二级页或者直接进入游戏
const toGameDetail = async (item: any) => {
  console.log(item);
  if (item.has_next == 1) {
    // 跳转二级页面
    router.push({
      path: "gameDetail",
      query: {
        agent_id: item.id,
        venue_id: item.three_game_kind[0].id,
        name: item.name[lang.value].toUpperCase(),
      },
    });
  } else {
    onPlayGame(item);
  }
};

const onClickSearch = () => {
  if (state.timer != null) {
    clearTimeout(state.timer);
  }

  // unserialize(data.name, false)

  if (!queryGame.value) return (result.searchList = result.list);

  result.searchList = result.list.filter((item: any) => {
    return unserialize(item.name, false).indexOf(queryGame.value) !== -1;
  });
};

// 返回游戏列表数据
const handleGames = () => {
  const hotGames = homeGameData.value.find((e: any) => e.id === 0)?.three_platform || [];
  result.list = hotGames;
  console.log(result.list, "-result.list-");
  result.searchList = hotGames;
};

onBeforeMount(() => {
  getHomeData();
  handleGames();
});
</script>

<style scoped lang="scss">
.hotGames {
  padding: 0 14px;

  //background: linear-gradient(180deg, rgba(77, 45, 45, 0.18) 0%, rgba(255, 45, 45, 0.12) 42.86%, rgba(255, 45, 45, 0) 100%);
  .content {
    width: 100%;
    margin-top: 14px;
  }

  .main_content {
    display: flex;

    >.games_box {
      width: 100%;
      height: 100%;

      .electronic_list_ul {
        height: 85vh;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-column-gap: 6px;
        overflow: auto;
        margin-top: 8px;

        .electronic_list_li {
          position: relative;
          height: 148px;
          position: relative;
          box-sizing: border-box;
          margin-bottom: 6px;

          .name {
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            border-radius: 0 0 8px 8px !important;
            left: 0;
            bottom: 0 !important;
            width: 100%;
            height: 36px;
            background-color: rgba(26, 25, 68, 1);

            span {
              text-align: center;
              font-family: PingFang SC;
              font-size: 14px;
              font-weight: 600;
            }
          }

          .bg_img {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
          }

          .name {
            width: 100%;
            font-family: PingFang SC;
            font-size: 12px;
            font-weight: 600;
            line-height: 12px;
            color: #ffffff;
            position: absolute;
            left: 0px;
            bottom: 8px;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .collect_img {
            position: absolute;
            top: 6px;
            right: 6px;
          }
        }

        .masking_layer {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          backdrop-filter: blur(1px);
          background: rgba(0, 0, 0, 0.6);
          font-family: PingFang SC;
          font-size: 12px;
          font-weight: 500;
          line-height: 18px;
          color: #ffffff;

          .maskin_img {
            width: 32px;
            height: 32px;
            margin-bottom: 8px;
          }
        }
      }
    }
  }

  .tab {
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 0 4px;

    font-size: 12px;

    div {
      display: flex;
      width: 68px;
      height: 40px;
      // padding: 10px;
      margin-bottom: 8px;
      justify-content: center;
      align-items: center;
      border-radius: 8px;
      background: #131232;
      box-shadow: 0.5px 0.5px 1px 0px #2e296b inset;

      >img {
        width: 68px;
        height: 40px;
      }

      >span {
        width: 68px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    .tab_ac {
      color: #fff;
      background: linear-gradient(180deg, #5567ff 0%, #9e1eff 100%);
      box-shadow: 0.5px 0.5px 1px 0px #9b9eff inset;
    }
  }

  .query {
    margin: 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;

    :deep(.nut-input--border) {
      border-bottom: none;
    }

    // :deep(.nut-input-left-box){
    //   margin-right: ;
    // }
    &:deep(.nut-input) {
      height: 36px;
      padding: 8px;
      border-radius: 8px;
      background: #1d1c3c;

      input {
        &::placeholder {
          //color: #fff;
        }
      }
    }
  }

  .scroll-view {
    height: 74vh;
    overflow: auto;
  }

  .game_list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;

    .item {
      width: 112px;
      height: 148px;
      position: relative;

      .cover {
        width: 86px;
        height: 86px;

        img {
          width: 100%;
          height: 100%;
        }

        .collect {
          position: absolute;
          right: 8px;
          top: 8px;
        }
      }

      .title {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 36px;
        text-align: center;
        line-height: 36px;
        border-radius: 0 0 8px 8px;
        color: #fff;
        background-color: rgba(26, 25, 68, 1);
      }
    }
  }
}
</style>
